.example-card {
  max-width: 70%;
  margin: 0 auto;
  /* to center the card */
  margin-bottom: 20px;
}
.example-form {
  display: flex;
  justify-content: center;
  /* center form horizontally */
  width: 100%;
  padding: 20px;
  /* Add some padding around the form to separate it from the edges */
}
.example-form mat-form-field {
  width: 100%;
  /* make form field take up full width */
  flex: 1;
  /* This will make the form field expand to fill the available space */
}
mat-card-content {
  min-height: 150px;
  /* adjust as needed */
}
/* Add some spacing around the card */
mat-card {
  margin: 20px;
  /* adjust as needed */
}
mat-card-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 0;
  /* Remove default padding */
  height: auto;
  /* Allow footer height to adjust based on its content */
}
.chat-form {
  width: auto;
}
.content-border {
  border: 1px solid #ddd;
  border-radius: 5px;
  margin: 10px;
  min-height: calc(100vh - 420px);
}
mat-icon {
  color: inherit;
  /* default color */
  transition: transform 0.3s ease-in-out;
  /* smooth transition for enlarging */
}
mat-icon.active {
  color: blue;
  /* color when hover */
  cursor: pointer;
  /* changes the cursor to a hand pointer */
  transform: scale(1.2);
  /* enlarges the icon */
}
::ng-deep .content-border[_ngcontent-ng-c3792759892] {
  border: 1px solid #ddd;
  border-radius: 5px;
  margin: 10px;
  background-color: #ecedea;
}
::ng-deep .mat-mdc-card-header {
  display: flex;
  padding: 16px 16px 0;
  background-color: #809c55;
}
::ng-deep .mat-mdc-form-field {
  --mat-mdc-form-field-floating-label-scale: 0.75;
  display: inline-flex;
  flex-direction: column;
  min-width: 60% !important;
  text-align: left;
}
::ng-deep .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
  --mat-mdc-form-field-label-transform: translateY(-34.75px) scale(var(--mat-mdc-form-field-floating-label-scale, 0.75));
  transform: var(--mat-mdc-form-field-label-transform);
  width: max-content;
}
::ng-deep .mat-mdc-form-field:not(.mat-form-field-no-animations) .mdc-text-field__input {
  transition: opacity 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
}
::ng-deep .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
  top: 28px;
  width: 100%;
}
::ng-deep .mat-mdc-card-subtitle ~ .mat-mdc-card-title,
::ng-deep .mat-mdc-card-title ~ .mat-mdc-card-subtitle,
::ng-deep .mat-mdc-card-header .mat-mdc-card-header-text .mat-mdc-card-title,
::ng-deep .mat-mdc-card-header .mat-mdc-card-header-text .mat-mdc-card-subtitle,
::ng-deep .mat-mdc-card-title-group .mat-mdc-card-title,
::ng-deep .mat-mdc-card-title-group .mat-mdc-card-subtitle {
  padding-top: 0;
  color: white;
}
mat-card-content {
  font-family: 'Pangolin', Roboto, "Helvetica Neue", sans-serif !important;
}
